<script lang="ts">
    import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
    import Divider from '$lib/components/Basic/Divider/Divider.svelte';
    import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
    const code1 = `<script lang="ts">
    import Divider from '$lib/components/Basic/Divider/Divider.svelte';
<\/script>
<div class="example">
    <div class="example-group-row">
        <span style="width: 80px;">solid</span>
        <Divider color="var(--color-info-400)"></Divider>
    </div>
    <div class="example-group-row">
        <span style="width: 80px;">dashed</span>
        <Divider style="dashed" color="var(--color-info-400)"></Divider>
    </div>
    <div class="example-group-row">
        <span style="width: 80px;">dotted</span>
        <Divider style="dotted" color="var(--color-info-400)"></Divider>
    </div>
    <div class="example-group-row">
        <span style="width: 80px;">double</span>
        <Divider style="double" color="var(--color-info-400)" width="6px"></Divider>
    </div>
</div>`;
    const code2 = `<script lang="ts">
    import Divider from '$lib/components/Basic/Divider/Divider.svelte';
<\/script>
<div class="example">
    <div class="example-group-row">
        <span style="width: 80px;">水平</span>
        <div style="width: 100%;">
            <div>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</div>
            <Divider color="var(--color-info-400)"></Divider>
            <div>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</div>
        </div>                    
    </div>
    <div class="example-group-row" style="margin-top: 30px;">
        <span style="width: 80px;">垂直</span>
        <div style="height: 18px;display: flex;align-items: center;">
            <div>Rain</div>
            <Divider color="var(--color-info-400)" direction="vertical"></Divider>
            <div>Home</div>
            <Divider color="var(--color-info-400)" direction="vertical"></Divider>
            <div>Grass</div>
        </div>
    </div>
</div>`;
const attributesData = [
		{ id: 1, name: 'style', describe: '分割线样式', type: ['solid','dashed','dotted','double'], defaulValue: 'solid' },
		{ id: 2, name: 'direction', describe: '分割线方向', type: ['horizontal','vertical'], defaulValue: 'horizontal' },
		{ id: 3, name: 'color', describe: '设置颜色', type: 'string', defaulValue: 'var(--color-border)' },
		{ id: 4, name: 'width', describe: '设置粗细', type: 'string', defaulValue: '1px' },
		{ id: 5, name: 'margin', describe: '设置间距', type: 'string', defaulValue: '16px' },
	];
</script>
<div class="component-container">
	<div class="title">
		<div class="name">Divider 分割线</div>
		<div class="describe">区隔内容的分割线。</div>
	</div>
	<div class="subtitle">
		<div class="name">Divider 样式</div>
		<div class="describe">
			我们提供了以下几种分割线样式，以供选择。
		</div>
    </div>
    <ComponentPreview code={code1}>
        <div class="example">
            <div class="example-group-row">
                <span style="width: 80px;">solid</span>
                <Divider color="var(--color-info-400)"></Divider>
            </div>
            <div class="example-group-row">
                <span style="width: 80px;">dashed</span>
                <Divider style="dashed" color="var(--color-info-400)"></Divider>
            </div>
            <div class="example-group-row">
                <span style="width: 80px;">dotted</span>
                <Divider style="dotted" color="var(--color-info-400)"></Divider>
            </div>
            <div class="example-group-row">
                <span style="width: 80px;">double</span>
                <Divider style="double" color="var(--color-info-400)" width="6px"></Divider>
            </div>
        </div>
    </ComponentPreview>
    <div class="subtitle">
		<div class="name">Divider 方向</div>
		<div class="describe">
			我们提供了2种分割线，水平和垂直。
		</div>
    </div>
    <ComponentPreview code={code2}>
        <div class="example">
            <div class="example-group-row">
                <span style="width: 80px;">水平</span>
                <div style="width: 100%;">
                    <div>I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.</div>
                    <Divider color="var(--color-info-400)"></Divider>
                    <div>There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.</div>
                </div>                    
            </div>
            <div class="example-group-row" style="margin-top: 30px;">
                <span style="width: 80px;">垂直</span>
                <div style="height: 18px;display: flex;align-items: center;">
                    <div>Rain</div>
                    <Divider color="var(--color-info-400)" direction="vertical"></Divider>
                    <div>Home</div>
                    <Divider color="var(--color-info-400)" direction="vertical"></Divider>
                    <div>Grass</div>
                </div>
            </div>
        </div>
    </ComponentPreview>
    
    <div class="subtitle">
		<div class="name">Message Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
</div>    